<template>
	<a-config-provider 
        v-bind:locale="locale">
		<!-- 
			由于我采用的是login.vue与home.vue不再一个页面中，所以App.vue只有一个router-view 
			ConfigProvider是ant design的国际化要求，绑定一个可状态管理改变的值locale
		-->
 		<router-view></router-view>       	
    </a-config-provider>
</template>

<script type="text/javascript">	
import axios from 'axios'
import { 
	ConfigProvider 
} from 'ant-design-vue'
import { 
	mapState 
} from 'vuex'



export default {
	name:"app",
	data(){
		return {
			locale: {}   //本地切换此状态绑定数据到 ConfigProvider
		}
	},
	components:{ 		 //按需加载还很麻烦，还不如全部加载，我是为了装
		AConfigProvider:ConfigProvider
	},
	created () {			
		this.setLanguage(this.lang)  

		// this.$axios.get("/product/list").then(response => {
        //     console.log(response)
        //  })
	},
	methods:{
		/**
		 * 这里要注意这个lang字符串通知作为值设置给了vue-i18n，这就是说这个字符串是枚举类型二不能乱写，因此这里是antd的国际化
		 *		和本地业务代码国际化的合并使用写法，这个字符串值需要在vue-i18n实例化的时候传入的值，
			*		zh-CN是中划线，不是下划线，呵呵。	
			*		现在只要触发state.lang的mutation就可以完全全局切换语言了，他包含本地业务代码的切换和ant design vue的切换。
			*/
		setLanguage(lang) {		              
			this.$i18n.locale = lang				
			switch (lang) {
				case 'zh-CN':			//es6 module与require混用，@vue/cli做过默认配置，否则不能这么写			
					this.locale = require('ant-design-vue/es/locale-provider/zh_CN').default 
					break
				case 'zh-TW':
					this.locale = require('ant-design-vue/es/locale-provider/zh_TW').default
					break
				case 'en-US':
					this.locale = require('ant-design-vue/es/locale-provider/en_US').default
					break
				default:
					;
			}
		},
	},
	computed: {
		//在多模块中第一个参数“setting”应该是命名空间，...mapState('setting', ['theme', 'weekMode', 'lang'])
		//  与ant design vue admin稍有不同，lang我放在根模块而不settings模块下，因此没有setting命名空间
		...mapState(['lang'])
	},
	watch: {    //监视lang的变化，这种变化变成了监视状态管理中的lang
		lang(val) {
			this.setLanguage(val)
		}	
	}
}
</script>